<seed-content #content>
  <seed-toolbar-header>
    <seed-toolbar-title>服务卡</seed-toolbar-title>
    <seed-toolbar-menu></seed-toolbar-menu>
  </seed-toolbar-header>
  <!--顶部-->
  <div class="list-head" [ngStyle]="{'background-image':'url('+getImage('manage/image_top_banner.png')+') ' }">
    <!--<p class="go-back">-->
      <!--<img [src]="getImage('manage/iconfont-houtui.png')">-->
    <!--</p>-->
    <p class="go-explain"  [routerLink]="['/goods/explain']">?</p>
  </div>
 <!--过滤器-->
  <select-status (outputStatus)="getSelectResult($event)" [statusList]="statusList" [typeList]="typeList"></select-status>
  <!--gap-->
  <div class="gap"></div>

  <!--cardlist-->
  <seed-infinite-scroll
    class="search-results"
    (infiniteScroll)="getServiceCardList()"
  >
      <div class="card-list">
        <div class="card-header">服务卡（{{cardTotal}}张）</div>
        <div class="list-content">
           <div class="list-item" *ngFor=" let card of cardList" (click)="goToServiceCardDetail(card)"   ><!--[routerLink]="[card.serviceCardStepUrl]"-->
             <seed-img class="img-box" [lazyLoadImg]="card.cardImgUrl" [defaultImg]="'longer'" [background]="'true'"></seed-img>
             <!--服务卡状态:1未激活、2服务中（可使用、激活）、3已完成、4不可用、5已终止、6已冻结 ,-->
             <p class="status no-use" [ngClass]="{'no-use':card.state==1  ,'can-use':card.state==2,'cannot-use':card.state==3 || card.state==4 || card.state==5 || card.state==6}">
               <span *ngIf="card.state == 1">未激活</span>
               <span *ngIf="card.state == 2">可使用</span>
               <span *ngIf="card.state == 3">已完成</span>
               <span *ngIf="card.state == 4">不可用</span>
               <span *ngIf="card.state == 5">已终止</span>
               <span *ngIf="card.state == 6">已冻结</span>
             </p>
             <div class="word">
               <p>{{card.cardName}}</p>
               <span *ngIf="card.usageCount || card.usageCount==0">{{card.usageCount}}次可用</span>
             </div>
             <p class="add-time" *ngIf="card.recently">最近添加</p>
             <!--透明底-->
             <div class="bg-opacity"></div>
           </div>
          <!--默认图-->
          <seed-default-graph *ngIf="cardList.length == 0"
                              [text]="'暂无内容'"
                              [url]="'unifyPic'"
          ></seed-default-graph>
        </div>
  </div>
    <seed-infinite-scroll-content
      class="load-bg"
      *ngIf="cardList.length > 2"
    ></seed-infinite-scroll-content>
  </seed-infinite-scroll>
</seed-content>
